<template>
  <div class="addInfo-container">
    <h2>{{newsParams.newsType|infoTitle}}</h2>
    <div class="addInfo-content">
      <div class="addInfo-listRow">
        <div class="addInfo-listCol1">
          <span>标题：</span>
        </div>
        <div class="addInfo-listCol2">
          <el-input v-model="newsInfo.Title" style="width:320px;"></el-input>
        </div>
      </div>
      <div class="addInfo-listRow">
        <div class="addInfo-listCol1">
          <span>发布时间：</span>
        </div>
        <div class="addInfo-listCol2">
          <el-date-picker v-model="newsInfo.CreatedAt" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </div>
      <div class="addInfo-listRow">
        <div class="addInfo-listCol1">
          <span>发表状态：</span>
        </div>
        <div class="addInfo-listCol2">
          <el-radio-group v-model="newsInfo.Status">
            <el-radio :label="0">公开</el-radio>
            <el-radio :label="1">内部</el-radio>
            <el-radio :label="2">未审</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div id="infoEditor">
    </div>
    <div class="info-button">
      <el-button type="primary" size="mini" @click="submitText">保存</el-button>
      <el-button type="info" size="mini" @click="resetTitle">取消</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editor: null,
      newsInfo: { Title: '', Status: 0, Category: '', Content: '', CreatedAt: '' },
      newTime: '2018-01-21 11:03:50',
      newsParams: {
        newsType: this.$route.params.newsType,
        newsId: 0
      },
      titles: ['节能动态', '通知公告', '情况通报', '政策法规', '节能知识']
    }
  },
  filters: {
    infoTitle: function(val) {
      return {
        1: '节能动态管理',
        2: '通知公告管理',
        3: '情况通报管理',
        4: '政策法规管理',
        5: '节能知识管理'
      }[val]
    }
  },

  mounted() {
    // 实例化editor编辑器
    this.editor = UE.getEditor('infoEditor', { initialFrameWidth: null, initialFrameHeight: 280, scaleEnabled: true });
    console.log(this.newsInfo)
    this.editor.addListener("ready", () => {
      this.editor.setContent(this.newsInfo.Content); // 确保UE加载完成后，放入内容。
    });

  },
  beforeRouteUpdate(to, from, next) {
    this.newsInfo = { Title: '', Status: 0, Category: '', Content: '', CreatedAt: '' }
    this.editor.setContent('')
    this.newsParams = to.params
    next();
  },
  methods: {
    // 新增信息提交
    async submitText() {
      // 获取editor中的文本
      this.newsInfo.Category = this.titles[this.newsParams.newsType - 1];
      this.newsInfo.Content = this.editor.getContent();
      console.log(this.editor.getContent())
      const newsInfo = this.newsInfo
      if (newsInfo.Title && newsInfo.Content && newsInfo.CreatedAt) {
        try {
          const result = await this.$post('/api/News', newsInfo)
          this.editor.setContent('')
          newsInfo.Title = ''
          newsInfo.Status = 0
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$router.push(`/editorInfo/${this.newsParams.newsType}`)
        }
        catch (error) {
          this.$message.error(error.message)
        }
      } else {
        this.$message({
          message: '请填写完整信息',
          type: 'warning'
        })
      }
    },
    // 清空内容
    resetTitle() {
      this.newsInfo.Title = ''
    },
    // 获取当前时间
    getNowTime(str) {
      var result = '';
      var date = new Date(str);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = date.getMinutes() + ':';
      var s = date.getSeconds();
      result = Y + M + D + h + m + s;
      return result;
    },
    // 获取新闻详情
    async newsDetail() {
      if (this.newsParams.newsId != '0') {
        const result = await this.$get("/api/News/" + this.newsParams.newsId)
        console.log(result, '新闻详情')
        this.newsInfo = result
        this.editor.setContent(this.newsInfo.Content)
      }
    }
  },
  destroyed() {
    // 将editor进行销毁
    this.editor.destroy();
  },
  created() {
    this.newsParams.newsType = this.$route.params.newsType;
    this.newsParams.newsId = this.$route.params.newsId;
    this.showHome.isShow = false;
    this.newsInfo.CreatedAt = this.getNowTime(new Date())
    this.newsDetail()
  }
}
</script>
<style lang="scss" scoped>
.addInfo-container {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
  padding: 0 15px 15px 15px;
  h2 {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .addInfo-content {
    height: 105px;
    border: 1px solid #dcdfe6;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    .addInfo-listRow {
      flex: 1;
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #dcdfe6;
      .addInfo-listCol1 {
        width: 150px;
        border-right: 1px solid #dcdfe6;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        color: darkgray;
      }
      .addInfo-listCol2 {
        display: flex;
        flex: 1;
        padding-left: 10px;
        align-items: center;
      }
    }
  }
  .info-button {
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
</style>
